<!--  -->
<template>
  <div>
    <div v-if="requestError" class="text-c errorPlace">
      <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')" alt="获取数据失败" />
      <div class="color-b font14" style="margin: 10px 0 0 0">
        获取数据失败!
      </div>
      <van-button plain round  size="small" color="#7232dd" type="primary" @click="getdetail">点击重试</van-button>
    </div>
    <van-form v-else @submit="submitFromData">
      <div class="font15 mt10 pl10">
        <span class="titletext ">{{titledata.title}}</span>
        <div class="graytext  mt10 font13">
          <span >工单编号：</span>
          <span class="titletext">{{titledata.pmInsId}}</span>
        </div>
      </div>
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item" />
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">基础信息</span> 
      </div>
      <van-field readonly required name="applicant" :value="fromdata.applicant" label="申请人：" label-width="4em" />
      <van-field readonly required name="city" :value="fromdata.city" label="地市：" label-width="3em" />
      <van-field readonly required name="county" :value="fromdata.county" label="县区：" label-width="3em" />
      <van-field readonly required name="department" :value="fromdata.department" label="部门：" label-width="3em" />
      <van-field readonly required name="createdTime" :value="fromdata.createdTime" label="申请时间：" label-width="5em" />
      <van-field readonly required name="applyReason" :value="fromdata.applyReason" label="申请原因：" label-width="5em" />
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item" />
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">查询名称列表</span> 
      </div>
      <el-table v-if="fromdata.queryPermissionBusinessTable" :data="fromdata.queryPermissionBusinessTable" border style="width: 100%">
        <el-table-column prop="configNumber" label="查询编号"/>
        <el-table-column label="查询名称" >
          <template slot-scope="scope">
            <span>{{scope.row.queryName.length>15?scope.row.queryName.slice(0,15) + '...':scope.row.queryName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请查询信息" >
          <template slot-scope="scope">
            <span>{{scope.row.fieldName.length>20?scope.row.fieldName.slice(0,20) + '...':scope.row.fieldName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="本次权限人员" >
          <template slot-scope="scope">
            <span>{{scope.row.authorizedPersonnel.length>20?scope.row.authorizedPersonnel.slice(0,20) + '...':scope.row.authorizedPersonnel}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column v-if="this.params.location=='dict.toStart'" label="已失效人员" >
          <template slot-scope="scope" >
            <span v-if="scope.row.invalidPersonnel">{{scope.row.invalidPersonnel.length>20?scope.row.invalidPersonnel.slice(0,20) + '...':scope.row.invalidPersonnel}}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="permissionEffectiveDays" label="权限有效期（天）"/>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button @click="toInfo(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="showAdminView">
        <div v-if="showAdminView" class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
          <div class="blue_item" />
          <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">业务管理员评估</span> 
        </div>
        <van-field v-if="showAdminView" readonly required name="selectionResults" :value="fromdata.selectionResults" label="评估结果：" label-width="5em" />
      </div>
      <div v-if="showEndView">
        <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
          <div class="blue_item" />
          <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">办理结果</span> 
        </div>
        <van-field readonly required autosize type="textarea" rows="1" name="processingResults" :value="fromdata.processingResults" label="办理结果：" label-width="5em" />
        <van-field readonly required name="permissionStartTime" :value="fromdata.permissionStartTime" label="权限生效时间：" label-width="7em" />
      </div>
      <historyAndSuggs id='target' :showHistory='showHistory'
            :historydata='historydata' :approveList='approveList' />
      <div class="left_botton" v-if="showMsgBox">
        <button block type="button" @click="toMsgValue()"
          style="color:#60a9ec; display: inline-block;width:100%;border: 0px solid #60a9ec;border-radius: 15px 0px 0px 15px;
          padding:10px 10px 10px 15px;font-size:13px">意见</button>
      </div>
      <div v-if="todotype==true||toread==true"  class="footer">
        <van-button block type="info" native-type="submit" :disabled="canToNext==true?false:true" 
          style="display: inline-block;width:100%;border: 15px solid #60a9ec;">{{toNextValue}}</van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
import { getFormDetail,findQueryPermissionByPmInsId, getWfLinkTracks, getWfOptMags } from '@/api/dictapi'
import util from "@/assets/js/public";
import { mapGetters } from "vuex"
import { Notify, Dialog, Toast } from 'vant'
import { openFileUrl } from '@/store/openFile'
import historyAndSuggs from "@/views/srqr/historyAndSuggs.vue"

export default {
  data() {
    return {
      active: 0,
      requestError:false,
      params: this.$route.query,
      showHistory: false,
      historydata: {},//已办显示当前办理人
      fromdata: {},//收入确认信息
      approveList: [],//审批意见列表
      titledata:{}, //主单据信息
      businessdata:{}, //商机基础信息
      showMsgBox:true,
      toNextValue:'流转下一步',
      canToNext: true,
      todotype:false,
      toread:false,
      showAdminView:false,
      showEndView:false,
      permissionEffectiveTimeVal:''
    }
  },
  computed: {
    ...mapGetters(['user']),
    ...mapGetters(['userinfo'])
  },
  //生命周期--创建完成
  activated() {
    if(this.params.pmInsType==null&&this.params.processType!=null) {
      this.params.pmInsType = this.params.processType
    }
    if (this.params.todoType % 2 == 0) {
      this.showHistory = true;
    }
    if(this.params.todoType=='1'){
      this.todotype=true;
      if(this.params.location=='dict.start'){
        this.canToNext=false 
        this.toNextValue='暂不支持该环节,请至PC端办理'
      }else {
        this.canToNext=true
        this.toNextValue='流转下一步'
      }
    }else if(this.params.todoType=='3'){
      this.toread=true;
    }
    if(this.params.location=='dict.toStart'||this.params.location=='end'){
      this.showAdminView=true 
      this.showEndView=true 
    }
    if(this.params.location=='dict.ictAdminToSystemAdmin'){
      this.showAdminView=true 
    }
    this.getdetail();
  },
  //生命周期--挂载完成
  components: {
    historyAndSuggs
  },
  //方法调用
  methods: {
    onClick(event) {
      console.log("切换tabs:", event)
        //对name进行赋值，此处name值取tabs中集合数据的位置顺序值
      if (event==0){
        this.showMsgBox=true
      }else {
        this.showMsgBox=false
      }
    },
    toMsgValue () {
      document.getElementById('target').scrollIntoView({ behavior: 'smooth' })
    },
    goBack() {
      this.$router.back(-1) //返回上一页
    },
    onError(result){
      this.requestError=true;
      Toast.clear();
      Notify(result.message);
    },
    getdetail() {
      Toast.loading({
        message: '加载中',
        forbidClick: false
      });

      getFormDetail(Object.assign(this.params, { userName: this.user.userName }))
        .then((result) => {
          if (!result.data) {
            this.onError(result);
            return;
          }
          if (result.data.data) {
            this.titledata = result.data.data
            this.params.pmInsId = result.data.data.pmInsId;
            this.findQueryPermissionByPmInsId();//获取第一步信息
          }

        })
    },
    //获取两个number code
    findQueryPermissionByPmInsId() {
      findQueryPermissionByPmInsId(this.params)
        .then((result) => {
          Toast.clear();
          if (!result.data) {
            this.onError(result);
            return;
          }
          if (result.data.data) {
            this.fromdata = result.data.data;
            if (this.fromdata.permissionEffectiveTime=='1'){
              this.permissionEffectiveTimeVal='一个月'
            }else if (this.fromdata.permissionEffectiveTime=='2'){
              this.permissionEffectiveTimeVal='二个月'
            }else if (this.fromdata.permissionEffectiveTime=='3'){
              this.permissionEffectiveTimeVal='三个月'
            }else if (this.fromdata.permissionEffectiveTime=='4'){
              this.permissionEffectiveTimeVal='四个月'
            }else if (this.fromdata.permissionEffectiveTime=='5'){
              this.permissionEffectiveTimeVal='五个月'
            }else if (this.fromdata.permissionEffectiveTime=='6'){
              this.permissionEffectiveTimeVal='六个月'
            }else if (this.fromdata.permissionEffectiveTime=='7'){
              this.permissionEffectiveTimeVal='七个月'
            }else if (this.fromdata.permissionEffectiveTime=='8'){
              this.permissionEffectiveTimeVal='八个月'
            }else if (this.fromdata.permissionEffectiveTime=='9'){
              this.permissionEffectiveTimeVal='九个月'
            }else if (this.fromdata.permissionEffectiveTime=='10'){
              this.permissionEffectiveTimeVal='十个月'
            }else if (this.fromdata.permissionEffectiveTime=='11'){
              this.permissionEffectiveTimeVal='十一个月'
            }else if (this.fromdata.permissionEffectiveTime=='12'){
              this.permissionEffectiveTimeVal='十二个月'
            }
          }
          if (this.showHistory==true) {
            this.getWfLinkTracks();
          }else {
            this.getWfOptMags()
          }
        })
    },
    getWfLinkTracks() {
      getWfLinkTracks(Object.assign(this.params),{userName:this.user.userName})
        .then((result)=>{
          Toast.clear();
          if(!result.data){
            Notify(result.message);
            return;
          }
          if(result.data.data){
            //数据过滤，并生成新的数组
            this.historydata=result.data.data.filter(item=>item.CURRENTSTATE==10)[0]
            if(this.historydata){
                if(this.historydata.MANAGER){
                  this.showHistory=true;
                }else{
                  this.showHistory=false;
                }
            }else{
              this.showHistory=false;
            }
          }else{
            this.showHistory=false;
          }
          this.getWfOptMags()
        })
    },

    getWfOptMags() {
      getWfOptMags(Object.assign(this.params), { userName: this.user.userName })
        .then((result) => {
          if (!result.data) {
            Notify(result.message);
            return;
          }
          this.approveList = result.data.data.reverse();
        })
    },
    openFileUrlfun(value) {
      this.$router.push(
        {
          name: 'fileview',
          query: {
            openFileUrl: openFileUrl(value)
          }
        }
      );
    },
    toInfo(index){
      console.log('infodata:'+JSON.stringify(index))
      this.$router.push(
        {
          name: 'qxdetailinfo',
          query: {
            infodata:index,
            location:this.params.location
          }
        }
      );
    },
    submitFromData() { //提交流转
      this.params.formData=this.fromdata;
      var formSendData={"htmlParamMap":{}};
      formSendData.htmlParamMap = this.fromdata;
      formSendData.id = this.titledata.id;
      formSendData.pmInsId = this.titledata.pmInsId;
      formSendData.processType = this.params.pmInsType
      formSendData.workItemId = this.params.workItemId;
      console.log("传给递交页面:", this.params)
      var params1 = {
            kv: {
              currentUserCode: util.encrypt(this.params.userName),
              source: 'MOBILE',
              location: this.params.location,
              processInstId: this.params.processInstId,
              processDefName: this.params.processDefName,
              processType: this.params.pmInsType,
              isClaimFun:'3',
              isClaimCounty:'3',
              isOperateCity:'3',
              isOperateCounties:'3',
              isProvinceConfirm:'3',
              isCityConfirm:'3',
            },
            body:{
              location: this.params.location,
              processInstId: this.params.processInstId,
              processDefName: this.params.processDefName,
              source: 'MOBILE',
            }
      };
      var params2 = {
            kv: {
              "currentUserCode": util.encrypt(this.params.userName),
              "source": 'MOBILE',
              "location": this.params.location,
              "processInstId": this.params.processInstId,
              'processType': this.params.pmInsType,
              'receiptCode': this.params.processInstId
            },
      };
      var params3 = {
            kv: {
              "source": 'MOBILE',
              "currentUserCode": util.encrypt(this.params.userName),
              "workItemId": this.params.todoType==3?"":this.params.workItemId,
              "processInstId": this.params.processInstId,
              "location": this.params.location,
              "notificationId":this.params.todoType==3?this.params.wfnid:""
            },
      };
      localStorage.setItem('submitPageParam', JSON.stringify({
        getDecisionsUrl:'decisionAndUser$api$getDecisions',
            getDecisionsParams:params1,
            getUserUrl:'decisionAndUser$api$getOrgAndUser',
            getUserParams:params2,
            tosubmintUrl:'applicationFormEnhance$api$startSubmitProcess',
            tosubmintParams:params3,
            formData:formSendData,
            fromMoa:this.params.fromMoa,
            type:this.params.todoType==3?"toRead":"toDo"
          }));
      this.$router.push(
        {
          name: 'srqrsubmit'
        }
      );
    },
  }
}
</script>
<style  scoped>
.errorPlace{
  position:absolute;
  margin-top: -80px;
  top: 50%;
  margin-left: -50px;
  left: 50%;
}
</style>